import React, { useEffect, useState } from 'react'
import utils from '../../utils/index'
import { InfiniteScroll } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
const Home = () => {
    const navigate=useNavigate()
    const [list,setList]=useState([])
    const [page,setPage]=useState(1)
    const getData=async()=>{
     const resp=await utils.get("/list",{params:{page}})
     console.log(resp.data.data);
     setList([...list,...resp.data.data])
     setPage(page + 1)
    }

    useEffect(()=>{
     getData()
    },[])

    const getDeail=(v)=>{
     navigate("/deail",{state:v})
    }
  return (
    <div>
      首页
      <div>
        {
            list.map((v,i)=>{
                return <div key={i} style={{
                    display: 'flex'
                }} onClick={() => getDeail(v)}>
                <img src={v.images} alt='' style={{width: "100px",height: "100px"}}/>
                <span>{v.title}</span>
                <span>{v.price}</span>
                <span>{v.date}</span>
                </div>
            })
        }
      </div>
      <InfiniteScroll loadMore={getData} hasMore={true} />
    </div>
  )
}

export default Home
